import React from "react";
import { Button, Form, Input, NavBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { forgetpwd, logindata } from "store/login";
import { useDispatch } from "react-redux";
import "./passwordone.css";

const Index = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch<any>();
  const [form] = Form.useForm();
  const back = () => {
    history.back();
  };

  const getyzm = () => {
    const email = form.getFieldValue("email");
    // console.log(email);
    dispatch(logindata(email));
  };

  const newpass = () => {
    setTimeout(() => {
      const data = form.getFieldsValue();
      // console.log(data);
      dispatch(forgetpwd(data)).then((res: any) => {
        console.log(res);

        if (res) {
          if (res.payload.status === "0000") {
            navigate("/PasswordTwo");
          }
        } else {
          console.log("接口调用失败！！！");
        }
      });
    });
  };
  return (
    <div className="passwordone">
      <NavBar onBack={back}>忘记密码</NavBar>
      <div className="passwordbox">
        <Form layout="horizontal" mode="card" form={form}>
          <Form.Item
            name={"email"}
            extra={
              <Button size="small" color="primary" onClick={getyzm}>
                获取验证码
              </Button>
            }
          >
            <Input placeholder="请输入邮箱账号" />
          </Form.Item>
          <Form.Item name={"code"}>
            <Input placeholder="请输入验证码" />
          </Form.Item>
        </Form>
      </div>
      <div className="pwdonebtn">
        <Button block color="primary" size="middle" onClick={newpass}>
          下一步
        </Button>
      </div>
    </div>
  );
};
export default Index;
